<!DOCTYPE html>
<html>
<head>
    <title>Settings</title>
</head>
<body>
    <h1>Settings</h1>
    <form id="settingsForm">
        <label for="resolution">Resolution:</label>
        <select id="resolution">
            <option value="640x480">640x480</option>
            <option value="1280x720">1280x720</option>
            <option value="1920x1080">1920x1080</option>
        </select>
        <br><br>
        <label for="savePath">Save Path:</label>
        <input type="text" id="savePath" readonly>
        <button type="button" id="selectPathBtn">Select Save Path</button>
        <br><br>
        <button type="submit">Save Settings</button>
    </form>
    <script>
        const { ipcRenderer } = require('electron');

        document.getElementById('selectPathBtn').addEventListener('click', () => {
            ipcRenderer.send('select-path');
        });

        ipcRenderer.on('selected-path', (event, path) => {
            document.getElementById('savePath').value = path;
        });

        document.getElementById('settingsForm').addEventListener('submit', (event) => {
            event.preventDefault();
            const resolution = document.getElementById('resolution').value;
            const savePath = document.getElementById('savePath').value;
            ipcRenderer.send('save-settings', { resolution, savePath });
        });
    </script>
</body>
</html>
